<template>
   <div>
      <el-card class="card-content " shadow="hover"  :class="userInfoStore.$state.theme">
         <div class="Main-content">
            <!-- 第一行：图片、设备名称、产线、状态灯 -->
            <div class="device-content">
               <!-- 左边 -->
               <div class="device-title">
                  <div class="showtitle">
                     <p class="DeviceName">{{ prop.device.DeviceName }}
                        <span class="NameIcon">-</span>
                        <span class="DeviceLocation">四号线{{ prop.device.DeviceLocation }}</span>
                     </p>
                     <p class="TerminalName">{{ prop.device.TerminalName }} ({{ prop.device.TerminalIdentity }}）</p>
                  </div>
               </div>
               <!-- 右边 -->
               <div class="status" @mouseenter="showHoverDiv" @mouseleave="hideHoverDiv">
                  <img :src=funStatus(WorkStatus?.WorkStatus)?.icon :alt=funStatus(WorkStatus?.WorkStatus)?.alt class="statusLight" />
                  <div class="hover-div" :class="{ 'show': isHover }">
                     <p v-for="statu in status" :key="statu.alt">
                        <img :src="statu.icon" alt="statu.alt">{{ statu.alt }}
                     </p>

                  </div>
               </div>
            </div>
            <!-- 第二行：检测总数、好品率、效率 -->
            <div class="card-number">
               <div class="number">
                  <h6 v-if="!Dashboard?.TotalCount">0</h6>
                  <h6 v-else>{{ Dashboard?.TotalCount }}</h6>
                  <p>检测总数</p>
               </div>
               <div class="number-padding">
                  <h6 v-if="!Dashboard?.QualifiedRate">0%</h6>
                  <h6 v-else>{{ Dashboard?.QualifiedRate / 10 }}%</h6>
                  <p>好品率</p>
               </div>
               <div class="numberRight">
                  <h6 v-if="!Dashboard?.ProductionEfficiency">0</h6>
                  <h6 v-else>{{ Dashboard?.ProductionEfficiency }}</h6>
                  <p>效率/时</p>
               </div>
            </div>
            <!-- 第三行：五个图标 -->
            <div class="card-icon">
               <div class="icon">
                  <!-- CPU使用率 -->
                  <el-popover placement="top" trigger="hover">
                     <div class="iconContent">
                        <p>CPU使用率：<span style="color:#1ea368;font-weight:900">{{ Hardware?.CPUsUsage ? Hardware?.CPUsUsage : 0 }}%</span></p>
                        <p v-for="squareColor in squareColors" :key="squareColor.icon">
                           <img :src=squareColor.icon :alt=squareColor.name>
                           <span class="fontsize">{{ squareColor.name }}</span>
                        </p>
                     </div>
                     <template #reference>
                        <img :src=fun2(Hardware?.CPUsUsage,1)?.icon alt="">
                     </template>
                  </el-popover>
                  <!-- GPU使用率 -->
                  <el-popover placement="top" trigger="hover">
                     <div class="iconContent">
                        <p>GPU使用率：<span style="color:#1ea368;font-weight:900">{{ Hardware?.GPUsUsage ? Hardware?.GPUsUsage : 0 }}%</span></p>
                        <p v-for="  squareColor   in   squareColors  " :key="squareColor.icon">
                           <img :src=squareColor.icon :alt=squareColor.name>
                           <span class="fontsize">{{ squareColor.name }}</span>
                        </p>
                     </div>
                     <template #reference>
                        <img :src=fun2(Hardware?.GPUsUsage,2)?.icon alt="">
                     </template>
                  </el-popover>
                  <!-- RAM使用率 -->
                  <el-popover placement="top" trigger="hover">
                     <div class="iconContent">
                        <p>RAM使用率：<span style="color:#1ea368;font-weight:900">{{ Hardware?.MemoryUsage ? Hardware?.MemoryUsage : 0 }}%</span></p>
                        <p v-for="  squareColor   in   squareColors  " :key="squareColor.icon">
                           <img :src=squareColor.icon :alt=squareColor.name>
                           <span class="fontsize">{{ squareColor.name }}</span>
                        </p>
                     </div>
                     <template #reference>
                        <img :src=fun2(Hardware?.MemoryUsage,3)?.icon alt="">
                     </template>
                  </el-popover>
                  <!-- HHD使用率 -->
                  <el-popover placement="top" trigger="hover">
                     <div class="iconContent">
                        <p>HHD使用率：<span style="color:#1ea368;font-weight:900">{{ Hardware?.DiskUsage ? Hardware?.DiskUsage : 0 }}%</span></p>
                        <p v-for="  squareColor   in   squareColors  " :key="squareColor.icon">
                           <img :src=squareColor.icon :alt=squareColor.name>
                           <span class="fontsize">{{ squareColor.name }}</span>
                        </p>
                     </div>
                     <template #reference>
                        <img :src=fun2(Hardware?.DiskUsage,4)?.icon alt="">
                     </template>
                  </el-popover>
                  <!-- NET使用率 -->
                  <el-popover placement="top" trigger="hover">
                     <div class="iconContent">
                        <p>NET使用率：<span style="color:#1ea368;font-weight:900">{{ Hardware?.NetworkUsage ? Hardware?.NetworkUsage : 0 }}%</span></p>
                        <p v-for="  squareColor   in   squareColors  " :key="squareColor.icon">
                           <img :src=squareColor.icon :alt=squareColor.name>
                           <span class="fontsize">{{ squareColor.name }}</span>
                        </p>
                     </div>
                     <template #reference>
                        <img :src=fun2(Hardware?.NetworkUsage,5)?.icon alt="">
                     </template>
                  </el-popover>
               </div>
               <div v-if="!Terminal" class="btn">详情</div>
               <router-link v-else class="btn" :to="`/details/${Terminal}`">详情</router-link>
            </div>
         </div>
         <!-- 故障报警 -->
         <!-- 条件还未完成 -->
         <div v-show="AlarmInfo" id="Pop-up-warning">
            <p> </p>
            <p class="Pop-up-warning-center">
               <span>
                  <!-- 警告标志 -->
                  <svg t="1687765686238" class="icon exclamation-point" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3288" width="28" height="28">
                     <path
                        d="M597.333333 119.466667c0 4.266667 8.533333 12.8 21.333334 34.133333s25.6 42.666667 42.666666 76.8 38.4 64 59.733334 102.4c21.333333 38.4 46.933333 76.8 68.266666 115.2 21.333333 38.4 46.933333 81.066667 68.266667 119.466667 21.333333 38.4 42.666667 76.8 64 106.666666 17.066667 34.133333 34.133333 59.733333 51.2 85.333334s21.333333 38.4 29.866667 46.933333c8.533333 17.066667 17.066667 34.133333 17.066666 51.2 4.266667 17.066667 0 29.866667-4.266666 46.933333s-12.8 25.6-21.333334 34.133334c-12.8 8.533333-25.6 12.8-42.666666 12.8L89.6 951.466667c-25.6 0-46.933333-4.266667-59.733333-12.8-12.8-8.533333-21.333333-21.333333-25.6-34.133334-4.266667-12.8-4.266667-29.866667 0-42.666666 4.266667-17.066667 8.533333-29.866667 21.333333-46.933334 4.266667-8.533333 12.8-21.333333 25.6-46.933333 12.8-21.333333 29.866667-51.2 51.2-81.066667 21.333333-34.133333 42.666667-68.266667 64-106.666666 21.333333-38.4 46.933333-81.066667 72.533333-119.466667s46.933333-81.066667 68.266667-119.466667c21.333333-38.4 42.666667-72.533333 59.733333-102.4 17.066667-29.866667 34.133333-55.466667 46.933334-76.8l21.333333-34.133333c8.533333-12.8 21.333333-25.6 38.4-34.133333 17.066667-8.533333 29.866667-12.8 46.933333-12.8s29.866667 4.266667 46.933334 8.533333c8.533333 4.266667 21.333333 17.066667 29.866666 29.866667zm-25.6 196.266666c0-8.533333 0-17.066667-4.266666-21.333333-4.266667-8.533333-8.533333-12.8-12.8-17.066667-4.266667-4.266667-12.8-8.533333-21.333334-12.8s-17.066667-8.533333-25.6-8.533333c-17.066667 0-29.866667 4.266667-42.666666 17.066667s-21.333333 25.6-21.333334 42.666666l0 264.533334c0 17.066667 8.533333 29.866667 21.333334 42.666666s25.6 17.066667 42.666666 17.066667 29.866667-4.266667 42.666667-17.066667c12.8-12.8 21.333333-25.6 21.333333-42.666666l0-264.533334zm-64 384c-17.066667 0-34.133333 4.266667-42.666666 17.066667s-17.066667 25.6-17.066667 42.666667 4.266667 34.133333 17.066667 42.666666c12.8 12.8 25.6 17.066667 42.666666 17.066667s34.133333-4.266667 42.666667-17.066667c12.8-12.8 17.066667-25.6 17.066667-42.666666s-4.266667-34.133333-17.066667-42.666667c-8.533333-12.8-25.6-17.066667-42.666667-17.066667z"
                        fill="#ffffff" p-id="3289"></path>
                  </svg>
               </span>
              {{ AlarmInfo ? AlarmInfo.AlarmMessage : '' }}
            </p>
            <!-- 关闭按钮 -->
            <p class="close">
               <svg @click="handlerWarning" t="1687766962611" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4478" width="25" height="25">
                  <path d="M794.8 794.8c-14 14-36.9 14-50.9 0L229.2 280.1c-14-14-14-36.9 0-50.9s36.9-14 50.9 0L794.9 744c13.9 13.9 13.9 36.8-0.1 50.8z" fill="#ffffff" p-id="4479"></path>
                  <path d="M794.8 229.2c14 14 14 36.9 0 50.9L280.1 794.8c-14 14-36.9 14-50.9 0s-14-36.9 0-50.9L744 229.1c13.9-13.9 36.8-13.9 50.8 0.1z" fill="#ffffff" p-id="4480"></path>
               </svg>
            </p>

         </div>
      </el-card>
   </div>
</template>
 
<script lang="ts" setup>
import { onMounted, ref, computed, inject, watch, watchEffect } from "vue";
import { RouterLink } from 'vue-router';
import { useRoute } from "vue-router";
// serverConfig.json是一个JSON格式的配置文件，用于存储服务器的配置信息
import serverConfig from "../../../serverConfig.json";
// 引入状态小图标
import WorkIcon from "@/assets/status/running.svg"
import faultIcon from "@/assets/status/bad.svg"
import outlineIcon from "@/assets/status/outline.svg"
import waitIcon from "@/assets/status/waiting.svg"
// 引入小图标
import cpuIcon1 from "@/assets/useRate/CPU1.svg"
import cpuIcon2 from "@/assets/useRate/CPU2.svg"
import cpuIcon3 from "@/assets/useRate/CPU3.svg"
import cpuIcon4 from "@/assets/useRate/CPU4.svg"
import gpuIcon1 from "@/assets/useRate/GPU1.svg"
import gpuIcon2 from "@/assets/useRate/GPU2.svg"
import gpuIcon3 from "@/assets/useRate/GPU3.svg"
import gpuIcon4 from "@/assets/useRate/GPU4.svg"
import hhdIcon1 from "@/assets/useRate/HHD1.svg"
import hhdIcon2 from "@/assets/useRate/HHD2.svg"
import hhdIcon3 from "@/assets/useRate/HHD3.svg"
import hhdIcon4 from "@/assets/useRate/HHD4.svg"
import netIcon1 from "@/assets/useRate/NET1.svg"
import netIcon2 from "@/assets/useRate/NET2.svg"
import netIcon3 from "@/assets/useRate/NET3.svg"
import netIcon4 from "@/assets/useRate/NET4.svg"
import ramIcon1 from "@/assets/useRate/RAM1.svg"
import ramIcon2 from "@/assets/useRate/RAM2.svg"
import ramIcon3 from "@/assets/useRate/RAM3.svg"
import ramIcon4 from "@/assets/useRate/RAM4.svg"
//获取设备的卡片式综合数据
import { useDevicesStore } from "@/stores/devices";
import { useUserInfoStore } from "@/stores/userInfo";
// 获取设备小仓库
const userInfoStore = useUserInfoStore();
const devicesStore = useDevicesStore();
const route = useRoute();
const theme = inject('theme');
// 定义状态的图标
const WorkImg = WorkIcon
const faultImg = faultIcon
const outlineImg = outlineIcon
const waitImg = waitIcon
// 引入使用率的图标
import redIcon from "@/assets/square/red.svg"
import yellowIcon from "@/assets/square/yellow.svg"
import greenIcon from "@/assets/square/green.svg"
import grayIcon from "@/assets/square/gray.svg"
onMounted(async () => {
   // 获取设备卡片的综合数据
   await getdevice()
   await getprodevent()
});
// 定义使用率的图标
const redImg = redIcon
const yellowImg = yellowIcon
const greenImg = greenIcon
const grayImg = grayIcon
// 定义cpu等小图标
const CPUGray = cpuIcon1
const CPUYellow = cpuIcon2
const CPUGreen = cpuIcon3
const CPURed = cpuIcon4
// 定义gpu等小图标
const GPUGray = gpuIcon1
const GPUYellow = gpuIcon2
const GPUGreen = gpuIcon3
const GPURed = gpuIcon4
// 定义hhd等小图标
const HHDGray = hhdIcon1
const HHDYellow = hhdIcon2
const HHDGreen = hhdIcon3
const HHDRed = hhdIcon4
// 定义net等小图标
const NETGray = netIcon1
const NETYellow = netIcon2
const NETGreen = netIcon3
const NETRed = netIcon4
// 定义ram等小图标
const RAMGray = ramIcon1
const RAMYellow = ramIcon2
const RAMGreen = ramIcon3
const RAMRed = ramIcon4
// 是否有后台返回的图片
const show = ref(true);
// 状态的提示框
const isHover = ref(false)
// 接收父组件传过来的数据
const props = defineProps(["device", "devicecardWebscoket", 'alarmcardWebscoket']);
const prop: any = ref(props);
// 定义基础路径
const baseURL = `http://${serverConfig.server.ip}:${serverConfig.server.port}${serverConfig.server.apiPath}`;
// 定义该卡片的终端标识符
const TerminalIdentity = ref<any>([]);
// 定义该卡片的内容
const Dashboard = ref<any>({})
const Hardware = ref<any>({})
const WorkStatus = ref<any>({})
const Terminal = ref<any>('')
const AlarmInfo = ref<any>()
// 将该卡片的终端标识符放入定义的数组中
TerminalIdentity.value.push(prop.value.device.TerminalIdentity)
//获取设备卡片的综合数据的功能函数
const getdevice = async () => {
   if (!prop.value.device.TerminalIdentity) return
   await devicesStore.deviceinfo(prop.value.device.TerminalIdentity);
   // 如果请求成功就从数据里面拿当前卡片的数据
   TerminalIdentity.value.map((value1: any) => {
      const deviceinfo = deviceInfo.value.find((item1: any) => {
         return item1.TerminalIdentity == value1
      })
      Terminal.value = deviceinfo.TerminalIdentity
      Dashboard.value = deviceinfo.StatisticResults
      Hardware.value = deviceinfo.Hardware
      WorkStatus.value = deviceinfo.WorkStatus
   })
}

// 告警信息的回调函数
const alarmFun = () => {
   const matchingItem = prop.value.alarmcardWebscoket.find((item: any) => TerminalIdentity.value.includes(item.TerminalIdentity));
   AlarmInfo.value = matchingItem
}

// 根据设备终端标识符查询最后一条生产事件信息
const getprodevent = async () => {
   if (!prop.value.device.TerminalIdentity) return
   await devicesStore.lastProdevent(prop.value.device.TerminalIdentity)
}

// 从仓库拿数据
const deviceInfoRef: any = ref(computed(() => devicesStore.$state.deviceInfo));
const deviceInfo = ref(deviceInfoRef)
// if(prop.value.devicecardWebscoket){
//   deviceInfo.value = prop.value.devicecardWebscoket
// }
// watch(()=>prop.value.devicecardWebscoket, (value) => {
//   console.log(value,'9');

//   Dashboard.value = prop.value.devicecardWebscoket
// }, {
//   immediate: true
// })

watch(prop.value.devicecardWebscoket, (value) => {
   if (value.length > 0) {
      //   console.log(value, '9');
      TerminalIdentity.value.map((value1: any) => {
         const deviceinfo = value.find((item1: any) => {
            return item1.TerminalIdentity == value1
         })
         // 对拿到的卡片内容进行存储
         Dashboard.value = deviceinfo?.StatisticResults
         Hardware.value = deviceinfo?.Hardware
         WorkStatus.value = deviceinfo?.WorkStatus
      })
   }
}, {
   immediate: true
})

watch(() => prop.value.alarmcardWebscoket, (value) => {
   alarmFun()
}, {
   immediate: true
})

// 将告警信息关闭
const handlerWarning = () => {
   AlarmInfo.value = '';
};
// 鼠标经过状态提示框显示
const showHoverDiv = () => {
   isHover.value = true
}

// 鼠标离开状态提示框隐藏
const hideHoverDiv = () => {
   isHover.value = false
}

const funStatus = (statu: any) => {
   const status = [
      { WorkStatus: 'Work', icon: WorkImg, alt: '开检' },
      { WorkStatus: 'Standby', icon: waitImg, alt: '待机' },
      { WorkStatus: 'Fault', icon: faultImg, alt: '故障' },
      { WorkStatus: 'Offline', icon: outlineImg, alt: '离线' },
   ]

   const foramtData: any = status.find((item) => item.WorkStatus == statu)
   if (!foramtData) return
   return foramtData
}
const status = [
   { WorkStatus: 'Work', icon: WorkImg, alt: '开检' },
   { WorkStatus: 'Standby', icon: waitImg, alt: '待机' },
   { WorkStatus: 'Fault', icon: faultImg, alt: '故障' },
   { WorkStatus: 'Offline', icon: outlineImg, alt: '离线' },
]
// 定义使用率的变量
const squareColors = [
   { name: "满:95% - 100%", icon: redImg },
   { name: "高:75% - 94%", icon: yellowImg },
   { name: "正常:1% - 74%", icon: greenImg },
   { name: "离线:无数据 - 0%", icon: grayImg },
]

const fun2 = (num: any, b: any) => {
   const ggg = [
      {
         name: 1, arr1: [{ minRate: 0, maxRate: 74, icon: CPUGreen },
         { minRate: 74, maxRate: 95, icon: CPUYellow },
         { minRate: 95, maxRate: 101, icon: CPURed },
         { minRate: 0, maxRate: 0, num: 0, icon: CPUGray }]
      },
      {
         name: 2, arr1: [{ minRate: 0, maxRate: 74, icon: GPUGreen },
         { minRate: 74, maxRate: 95, icon: GPUYellow },
         { minRate: 95, maxRate: 101, icon: GPURed },
         { minRate: 0, maxRate: 0, num: 0, icon: GPUGray }]
      },
      {
         name: 3, arr1: [{ minRate: 0, maxRate: 74, icon: HHDGreen },
         { minRate: 74, maxRate: 95, icon: HHDYellow },
         { minRate: 95, maxRate: 101, icon: HHDRed },
         { minRate: 0, maxRate: 0, num: 0, icon: HHDGray }]
      },
      {
         name: 4, arr1: [{ minRate: 0, maxRate: 74, icon: NETGreen },
         { minRate: 74, maxRate: 95, icon: NETYellow },
         { minRate: 95, maxRate: 101, icon: NETRed },
         { minRate: 0, maxRate: 0, num: 0, icon: NETGray }]
      },
      {
         name: 5, arr1: [{ minRate: 0, maxRate: 74, icon: RAMGreen },
         { minRate: 74, maxRate: 95, icon: RAMYellow },
         { minRate: 95, maxRate: 101, icon: RAMRed },
         { minRate: 0, maxRate: 0, num: 0, icon: RAMGray }]
      }
   ]

   const item = ggg.find((obj) => obj.name == b);
   if (!item || !item.arr1) return null;


   const aaa = item.arr1.find((obj: any) => {
      return ((obj.minRate < num) && (obj.maxRate >= num)) || (num == obj.maxRate && num == obj.minRate)
   })

   if (!aaa) return
   return aaa
}
</script>
 
<style scoped lang="scss">
@font-face {
   font-family: DINCond-Medium;
   src: url(../../assets/font/DINCond-Medium.otf);
}

@import '@/assets/styles/controlmodeFour/controlmode-light.scss';
@import '@/assets/styles/controlmodeFour/controlmode-dark.scss';

/*@media screen and (max-height: 1440px) {
   .card-content-Margin {
     margin: 0 0px 30px 0px;
   }
 }
 
 @media screen and (max-height: 1080px) {
   .card-content-Margin {
     margin: 0 0px 24px 0px;
   }
 }*/

:deep(.el-card__body) {
   padding: 0;
}

:deep(.el-tooltip__trigger) {
   margin-right: 22px;
}

/*激活的状态*/
.active {
   color: #f2994a;
}

.fontsize {
   font-size: 8px;
   padding-left: 10px;
}

.card-content {
   position: relative;
   /*height: 160px;*/
   padding: 0 24px;
   border-radius: 4px;
   box-shadow: 0px 3px 6px 0px rgba(58, 58, 58, 0.05);
   margin: 0 0px 16px 0px;
   height: 100%;
   padding-top: 20px;

   
}
.theme1 {
   background: #FFFFFF;
   box-shadow: 0px 3px 6px 0px rgba(58, 58, 58, 0.05);
   @import '@/assets/styles/controlmodeFour/controlmode-light.scss';
 }
 
 .theme2 {
   background: #292930;
   @import '@/assets/styles/controlmodeFour/controlmode-dark.scss';
 }
.card-content:hover {
   border-radius: 4px;

   box-shadow: 0px 6px 16px 0px rgba(96, 97, 112, 0.16), 0px 2px 6px 0px rgba(40, 41, 61, 0.03);
}

#Pop-up-warning {
   position: absolute;
   top: 40%;
   left: 0%;
   background: #ff636b;
   height: 48px;
   width: 100%;
   display: flex;
   justify-content: space-around;
   align-items: center;
   font-size: 16px;
   font-weight: 500;
   color: #ffffff;
   opacity: 0.9;
   letter-spacing: 2px;

   .exclamation-point {
      margin-right: 20px;
   }

   .Pop-up-warning-center {
      display: flex;
      align-items: center;
   }

   .close {
      cursor: pointer;
   }
}
</style>